<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form action="">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
        <span id="usernameSpan"></span>
        <br>
        <input type="password" name="password" placeholder="请输入密码"> <br>
        <button>提交</button>
    </form>
    <!--  导入axios类库  -->
    <script type="text/javascript" src="./js/axios-0.18.0.js"></script>
    <script type="text/javascript">
        /*
            说明：
                1.后台地址url："http://localhost:8080/registerServlet"
                2.后台需要根据key即参数名是username来获取前端提交的用户名数据
                3.后台已经存在的用户名是："岩岩"
         */
        //1.给用户名输入框绑定一个离焦事件
        document.getElementById("username").onblur = function () {
            //2.获取用户名输入框输入的值
            let usernameVal = document.getElementById("username").value;
            if (usernameVal.trim() != "") {
                //说明输入的用户名不为空
                //3.向后台发送ajax异步请求，将输入框输入的用户名传递到后台服务器 ：username=输入的值
                //http://localhost:8080/registerServlet 表示后台请求服务器地址，如果发送的是get请求并且携带数据需要在地址后面使用?拼接
                //http://localhost:8080/registerServlet?username=锁哥
                axios.get("http://localhost:8080/registerServlet?username=" + usernameVal)
                    .then(resp => {
                        //4.接收后台服务器的响应数据
                        let obj = resp.data;
                        //5.处理响应数据
                        //   console.log(obj);
                        //通过上述输出结果我们发现如果输入的用户名存在返回false，表示不能注册，输入的用户名不存在返回true，表示可以注册
                        if (obj) {
                            //5.1判断如果obj是true,说明输入的用户名不存在，可以注册，在上述<span id="usernameSpan"></span>标签文本添加绿色的：
                            //恭喜，该用户可以注册
                            document.getElementById("usernameSpan").innerHTML = "√恭喜，该用户可以注册";
                            //设置字体颜色
                            document.getElementById("usernameSpan").style.color = "#f4d314";
                        } else {
                            //5.2判断如果obj是false,说明输入的用户名存在，不可以注册，在上述<span id="usernameSpan"></span>标签文本添加红色的：
                            //糟糕，瘪三，你输入的用户已经存在
                            document.getElementById("usernameSpan").innerHTML="您输入的用户已经存在";
                            //设置字体颜色是红色的
                            document.getElementById("usernameSpan").style.color = "#f9d0d4";
                        }
                    });
            }
        }

    </script>
</body>

</html>